<template>
  <a-modal v-model:visible="modalVisible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 新增单位类型</template>
    <div>
      <a-form ref="formRefs" :model="form" auto-label-width>
        <a-form-item field="name" label="单位类型：" required>
          <a-input
            v-model="form.name"
            placeholder="please enter your username..."
          />
        </a-form-item> </a-form
    ></div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, watchEffect, onMounted, ref, watch } from 'vue';

  const formRefs = ref();
  const props = withDefaults(
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false
    }
  );

  const form = reactive({
    name: ''
  });

  const emit = defineEmits(['update:visible', 'addUnitForm']);

  const handleOk = () => {
    formRefs.value.validate((res) => {
      if (res === undefined) {
        emit('addUnitForm', form);
      }
    });
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    }
  });

  watchEffect(() => {
    if (modalVisible.value) {
      form.name = '';
    }
  });
</script>

<style scoped lang="less"></style>
